import {
  LegacyCard,
  Popover,
  Button,
  ActionList,
  TextContainer,
  ResourceList,
  LegacyStack,
  List,
  Icon,
} from "@shopify/polaris";
import { useState, useCallback } from "react";

import React from "react";
import {
  HorizontalDotsMinor,
  CancelMajor,
  ChatMajor,
} from "@shopify/polaris-icons";

import styled from "./index.module.less";

function LegacyCardExample() {
  //更多
  const [popoverActive2, setPopoverActive2] = useState(false);

  const togglePopoverActive2 = useCallback(
    () => setPopoverActive2((popoverActive2) => !popoverActive2),
    []
  );

  const activator2 = (
    <div onClick={togglePopoverActive2}>
      <Icon source={HorizontalDotsMinor}></Icon>
    </div>
  );

  const [expanded, setExpanded] = useState(false);

  return (
    <LegacyCard>
      <div className={styled.box1}>
        <div className={styled.zhinan}>
          <div>设置指南</div>
          <div className={styled.Provp}>
            <div>
              <Popover
                active={popoverActive2}
                activator={activator2}
                autofocusTarget="first-node"
                onClose={togglePopoverActive2}
              >
                <ActionList
                  actionRole="menuitem"
                  items={[
                    {
                      content: "忽略",
                      prefix: <Icon source={CancelMajor}></Icon>,
                    },
                    {
                      content: "提供反馈",
                      prefix: <Icon source={ChatMajor}></Icon>,
                    },
                  ]}
                />
              </Popover>
            </div>
            <div className={styled.downB}>
              <Button
                removeUnderline
                plain
                monochrome
                disclosure={expanded ? "up" : "down"}
                onClick={() => {
                  setExpanded(!expanded);
                }}
              ></Button>
            </div>
          </div>
        </div>
      </div>
      <LegacyCard.Section>
        <div className={styled.gexing}>使用此个性化指南设置并运营商店。</div>
        <div className={styled.renwu}>
          <div>已完成1/3个任务</div>
          <div className={styled.bgbottom}>
            <div className={styled.bgtop}></div>
          </div>
        </div>
      </LegacyCard.Section>
      {expanded && (<LegacyCard.Section title="Total Sales Breakdown">
        <ResourceList
          resourceName={{ singular: "sale", plural: "sales" }}
          items={[
            {
              sales: "Orders",
              amount: "USD$0.00",
              url: "#",
            },
            {
              sales: "Returns",
              amount: "-USD$250.00",
              url: "#",
            },
          ]}
          renderItem={(item) => {
            const { sales, amount, url } = item;
            return (
              <ResourceList.Item
                id={sales.toLocaleLowerCase()}
                url={url}
                accessibilityLabel={`View Sales for ${sales}`}
                onClick={() => console.log("clicked item", item)}
              >
                <LegacyStack>
                  <LegacyStack.Item fill>{sales}</LegacyStack.Item>
                  <LegacyStack.Item>{amount}</LegacyStack.Item>
                </LegacyStack>
              </ResourceList.Item>
            );
          }}
        />
      </LegacyCard.Section>)}
    </LegacyCard>
  );
}

export default LegacyCardExample;

//   <Box>
//             <LegacyCard sectioned>
//               <div className={styled.box1}>
//                 <div className={styled.zhinan}>
//                   <div>设置指南</div>
//                   <div className={styled.Provp}>
//                     <div>
//                       <Popover
//                         active={popoverActive2}
//                         activator={activator2}
//                         autofocusTarget="first-node"
//                         onClose={togglePopoverActive2}
//                       >
//                         <ActionList
//                           actionRole="menuitem"
//                           items={[
//                             {
//                               content: "忽略",
//                               prefix: <Icon source={CancelMajor}></Icon>,
//                             },
//                             {
//                               content: "提供反馈",
//                               prefix: <Icon source={ChatMajor}></Icon>,
//                             },
//                           ]}
//                         />
//                       </Popover>
//                     </div>
//                     <div className={styled.downB}>
//                       <Button
//                         removeUnderline
//                         plain
//                         monochrome
//                         disclosure={expanded ? "up" : "down"}
//                         onClick={() => {
//                           setExpanded(!expanded);
//                         }}
//                       ></Button>
//                     </div>
//                   </div>
//                 </div>
//                 <div className={styled.gexing}>
//                   使用此个性化指南设置并运营商店。
//                 </div>
//                 <div className={styled.renwu}>
//                   <div>已完成1/3个任务</div>
//                   <div className={styled.bgbottom}>
//                     <div className={styled.bgtop}></div>
//                   </div>
//                 </div>
//               </div>
//               <div className={styled.box2}></div>
//             </LegacyCard>
//           </Box>
